import { NInput,NIcon,NButton,NInputGroup } from "naive-ui";
import { Search,Funnel } from '@vicons/ionicons5'
import { reactive,PropType } from 'vue';

import {Autobind, Component, ComponentProps, Hook, Mut, VueComponent} from 'vue3-oop'
import { SkipSelf } from 'injection-js'
import RouterService from '@/service/RouterService'

interface IProps {
  visible?: boolean,
  defaultValue?: string,
  onSearch?: (value: string) => void,
  showSenior?: boolean,
  toggleSenior?: ()=>void,
}
@Component()
export default class SearchBar extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    visible: {default: true},
    defaultValue: {default:''},
    onSearch: {default:()=>(value:string)=>{console.log('no onSearch to invoke')}},
    showSenior: {default:false},
    toggleSenior: {default:()=>()=>{console.log('no toggleSenior to invoke')}}
  }

  @Mut() private value = '';

  constructor() {
    super();
  }

  @Hook('Mounted')
  onMounted() {
    if (this.props.defaultValue && this.props.defaultValue.length > 0) {
      this.value = this.props.defaultValue;
    }
  }

  // 触发搜索
  private triggerSearch=(event:KeyboardEvent|PointerEvent)=>{
    if(event instanceof PointerEvent||(event instanceof KeyboardEvent && event.code==='Enter')){
      this.props.onSearch?.(this.value);
    }
  }

  getValue=()=>this.value

  render() {
    return this.props.visible && (
      <NInputGroup>
        <NInput placeholder="搜索" onKeyup={this.triggerSearch} value={this.value} onInput={(newValue)=>{this.value=newValue}}>
          {{
            suffix:()=>(
              <NIcon {...{style:{cursor:'pointer'},onClick:this.triggerSearch}}><Search/></NIcon>
            )
          }}
        </NInput>
        {
          !this.props.showSenior?null:(
            <NButton
              style={{padding:'0 10px'}}
              onClick={this.props.toggleSenior}
            >
              <NIcon><Funnel/></NIcon>
            </NButton>
          )
        }
      </NInputGroup>
    )
  }
}
